[bubble]別のタイプにリンクしたデータを取り扱ってみる

データを取り扱う際、各データ同士の繋がりを使うことが多いと思います。

例えば、とある組織に所属するユーザーを取り扱いたいとき、

組織を表す箱(Bubbleで言うType)には、組織名/作成日　などのフィールドを用意します。

ユーザーを表す箱(Bubbleで言うType)には、ユーザー名/メールアドレス　などのフィールドを用意します。

組織メンバーを表す箱(Bubbleで言うType)には、どの組織か/どのユーザーか/作成日　などが必要なのではないでしょうか。

図で表してみると

こんな感じでリンクされている状態(組織メンバーフィールドにユーザーや組織をあらわす値を入れることで)と言えます。

データを取得する時は、組織メンバーを参照するとリンクされた組織・ユーザーの情報も一緒に参照できるようにすると別の箱にあるデータを何度も取得する必要がない、 保存するときも、ユーザーや組織に入っている名前などを再度格納する必要がなくなります。

Bubbleでは、

フィールドに組み込みのデータ型(テキスト、数値など)以外に、別のデータ型であるタイプを持つことができるので

このようなリンクを表現することが可能です。

実際にBubbleのアプリで試していきたいと思います。

やってみる

Typeを準備

冒頭で書いた例の通り、BubbleアプリのDataから組織、組織メンバーのTypeを作成します。

ユーザーですが、Bubbleで作るWebアプリにAuth0を使ってログインできるのか　で作られたデータをそのまま使います。

組織Type

ユーザーType

組織メンバーType

組織を表すカスタムフィールドと、ユーザーを表すカスタムフィールドを追加し、それぞれのフィールドタイプで作成したTypeを選択します。

このように選択肢に現れます。

データの登録

※ ユーザーTypeはサインアップ時に作成されるのでそのままにしておきました。

組織Type

データを登録する画面を作る(workflowでデータを追加することになります)か、直接データを追加します。

workflowではCreate a new thingでTypeに登録するようにします。

組織名を入力して登録するフローを例にとると、

• Type
  • 作成した組織Typeの名前を選択
• Set another filed
  • Name = <<組織名のinputの値>>
• Only when
  • <<組織名のinputの値 is not empty>>

といったStepを作成します。

登録したデータは、DataタブのApp dataをクリックすると確認できます。

この画面にあるNew entryをクリックして追加することもできます。

組織メンバーType

こちらも同様に、データを登録する画面を作る(workflowでデータを追加することになります)か、直接データを追加します。

組織名とユーザーのメールアドレスを選択して登録するフローを例にとると、

• Type
  • 作成した組織メンバーTypeの名前を選択
• Set another filed
  • <<組織フィールド名>> = <<組織名のDropdownの値>>
  • <<ユーザーフィールド名>> = <<ユーザー名のDropdownの値>>
• Only when
  • <<組織名のDropdownの値 is not empty>>
  • <<ユーザー名のDropdownの値 is not empty>>

といったStepを作成します。

こちらも登録したデータは、DataタブのApp dataをクリックすると確認できます。

さて、データは登録されましたが、組織とユーザーを表すフィールドには長い文字列が格納(表示)されています。

これは一体なんの値なのかと言うと、Typeの Primary Fields というのに設定したフィールドの値が入っています。

Primary Fieldsについて

Primary Fieldsは、データベースに別のTypeのデータフィールドがある場合、特定のデータTypeに対して表示・検索するときに使われるフィールド名のことで、自由に変更できます。

Primary FieldsはDataタブのApp data画面にあるPrimary Fieldsをクリックすると確認できます。

画像のようにunique idというのが設定されていると、その値が組織とユーザーを表すフィールドに表示されます。

組織のPrimary Fieldsを組織名に変更してみると

このように名前が表示されます。

データを確認するとき、unique idよりも名前などにした方が視認性が良くなる場合もあります

doc

データを表示させてみる

では、組織メンバーに登録された情報を表示させてみます。

ログインしているユーザーが所属している組織一覧を取得する　というユースケースを例にとります。

Repeating Group

一覧を表示sさせたいので、Repeating Groupを設置します。

設置した後、読み込むデータを何にするのかを設定していきます。

• Type of content
  • 組織メンバーのTypeを選択
• Data source
  • Do a search for 組織メンバーのTypeにし、Add a new constraintをUser = Current user にします。

Text

Repeating Groupにデータを読み込むように設定したので、そのデータを表示させるためのテキストフィールドを追加します。

設置した後、Insert dynamic dataを使って表示させるデータを設定します。

Current cell's <<組織メンバーのType>>'s <<組織のフィールド名>>'s <<表示したいフイールド>>

といった形式で表示データを設定できます。

今回のデータだと、Current cell's OrganizationMembers's Org's Name で組織名を表示できます。

これでロ グインしているユーザーが所属している組織一覧　を表示することができます。

表示例

最後に

他のTypeとリンクしたデータを扱ってみました。

Webアプリだとこういったリレーションシップを扱うことも多いので、NoCodeでもそこそこ複雑な処理ができるのは良いですね。